---
title: 配色方案
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

## 色彩方案卡

代表不同的色彩方案，並特別為淺色和深色主題量身定制。

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemeCard } from "twenty-ui/display";

export const MyComponent = () => {
  return (
      <ColorSchemeCard
      variant="Dark"
      selected={true}
      />
  );
};
```

</Tab>

<Tab title="Props">

| 屬性   | 類型                                      | 描述                                                           | 預設值 |
| ---- | --------------------------------------- | ------------------------------------------------------------ | --- |
| 變體   | 字串                                      | The color scheme variant. 選項包括`深色`、`淺色`和`系統` | 淺色  |
| 已選定  | 布爾值                                     | 如果`true`，顯示勾選標記以指示所選的色彩方案                                    |     |
| 附加屬性 | `React.ComponentPropsWithoutRef<'div'>` | 標準 HTML `div` 元素屬性                                           |     |

</Tab>

</Tabs>

## 色彩方案選擇器

允許用戶在不同的色彩方案之間選擇。

<Tabs>
<Tab title="Usage">

```jsx
import { ColorSchemePicker } from "twenty-ui/display";

export const MyComponent = () => {
  return <ColorSchemePicker
  value="Dark"
  onChange
  />;
};
```

</Tab>

<Tab title="Props">

| 屬性   | 類型       | 描述                |
| ---- | -------- | ----------------- |
| 值    | `配色方案`   | 當前選定的色彩方案         |
| 變更事件 | function | 用戶選擇色彩方案時要觸發的回調函數 |

</Tab>

</Tabs>
